<template>
    <div
        class="overPayment"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="溢缴款转出">
            <template slot="cardBody">
                <div class="formContainer">
                    <!-- 搜索表单模块 -->
                    <el-form
                        class="searchForm"
                        ref="searchForm"
                        :model="searchForm"
                        label-position="right"
                        :rules="formRules"
                        :inline="true"
                        size="small"
                        label-width="150px"
                    >
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="账户类别:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.accountType"
                                        placeholder="请选择账户类别"
                                        clearable
                                        @change="changeCardList"
                                    >
                                        <el-option
                                            v-for="item in AccountionTYPE_INFO"
                                            :label="item.label"
                                            :value="item.code"
                                            :key="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="卡号:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.cardno"
                                        placeholder="请选择卡号"
                                        clearable
                                    >
                                        <el-option
                                            v-for="item in cardList"
                                            :label="item.CARDNBR"
                                            :value="item.CARDNBR"
                                            :key="item.CARDNBR"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="账面余额:" label-position="left">
                                    <el-input v-model="searchForm.OXFRAVALX" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="跨行标志:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.outFlag"
                                        placeholder="请选择跨行标志"
                                        @change="changeFlag"
                                    >
                                        <el-option
                                            v-for="item in outFlag"
                                            :label="item.label"
                                            :value="item.code"
                                            :key="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="转出金额:" prop="OVERPAYAMT" label-position="left">
                                    <el-input placeholder="请输入转出金额" v-model="searchForm.OVERPAYAMT"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item
                                    label-position="left"
                                    prop="shiftIntoCardNo"
                                    label="转入卡卡号:"
                                >
                                    <el-input
                                        placeholder="请输入转入卡卡号"
                                        v-model="searchForm.shiftIntoCardNo"
                                        @blur="checkagain"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item
                                    label-position="left"
                                    prop="shiftIntoBankNo"
                                    label="申请转入的银行行号:"
                                >
                                    <el-input
                                        placeholder="请输入转入的银行号"
                                        v-model="searchForm.shiftIntoBankNo"
                                        @input="handleInput"
                                        :disabled="outButtonFlag"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item
                                    label-position="left"
                                    prop="shiftIntoBankName"
                                    label="申请转入的银行名称:"
                                >
                                    <el-input
                                        placeholder="请输入转入的银行名称"
                                        v-model="searchForm.shiftIntoBankName"
                                        @input="handleInput"
                                        :disabled="outButtonFlag"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- 话术 -->
                        <div class="hstable_wrap" v-if="speechList.length!=0">
                            <el-table
                                :data="speechList"
                                border
                                stripe
                                header-row-class-name="headerRow"
                                ref="showListTable"
                                class="heard-bg business_table hstable"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                                <el-table-column label="业务话术">
                                    <template slot-scope="scope">{{scope.row.content}}</template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <el-row class="buttonBox">
                            <el-button
                                type="primary"
                                size="small"
                                @click="checkAcct"
                                :disabled="ifCheckOut"
                            >借记卡校验</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleRollOut"
                                :disabled="(!ifcheckacct)||checkflag"
                            >转 出</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleReset"
                            >重 置</el-button>
                        </el-row>
                    </el-form>

                    <!-- 转出结果展示 -->
                    <el-dialog
                        v-drag
                        :close-on-click-modal="false"
                        title="溢缴款转出处理申请成功"
                        width="500px"
                        center
                        :visible="isShowDialog"
                        @close="handleCloseDialog"
                        append-to-body
                        custom-class="messageDialog"
                    >
                        <el-row>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行卡号:</span>
                                <span class="info">{{searchForm.shiftIntoCardNo }}</span>
                            </el-col>
                            <el-col :span="12" class="infoItem">
                                <span class="title">溢缴款金额:</span>
                                <span class="info">{{ searchForm.OVERPAYAMT }}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行行号:</span>
                                <span class="info">{{ searchForm.shiftIntoBankNo }}</span>
                            </el-col>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行卡银行名称:</span>
                                <span class="info">{{searchForm.shiftIntoBankName }}</span>
                            </el-col>
                        </el-row>

                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">溢缴款转出处理申请成功，近期内请注意转入账户的动账情况，如有疑问，请及时与我行联系</span>
                        </p>
                    </el-dialog>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getDictSelectList } from '@/utils/Common';
import { RegConfig } from '@/utils/RegConfig';

export default {
    name: 'overPayment',
    components: {
        cardComponent,
    },
    data() {
        const validatorPass = (rule, value, callback) => {
            const overvalue = Number(value);
            console.log('overvalue', overvalue);
            console.log('this.this.OXFRAVALX', this.OXFRAVALX);
            if (parseFloat(overvalue) === 0) {
                callback(new Error('转出金额不能为0，请重新输入!'));
            } else if (parseFloat(overvalue) > parseFloat(this.OXFRAVALX)) {
                callback(new Error('转出金额不能大于溢缴款金额'));
            } else {
                callback();
            }
        };
        return {
            outButtonFlag: true,
            pageLoading: false, // 页面loading
            isShowDialog: false, // 对话框显示控制阀
            bankList: [],
            searchForm: { // 搜索表单字段
                searchForm: '个人账户', // 账户类别
                OXFRAVALX: '', // 账面余额金额
                OVERPAYAMT: '',//溢缴款转出金额
                shiftIntoCardNo: '', // 转入卡卡号
                outFlag: '0',
                shiftIntoBankNo: '6440', // 申请转入的银行行号
                shiftIntoBankName: '徽商银行', // 申请转入的银行卡银行名称
                cardno: '',
            },
            // 转出成功信息
            rollOutData: {
                BANKACCT: '', // 申请转入的银行卡号
                OVERPAYAMT: '', // 溢缴款金额
                BANKNO: '', // 申请转入的银行行号
                BANKNAME: '', // 申请转入的银行卡银行名称
            },
            // 表单字段校验规则
            formRules: {
                shiftIntoCardNo: [
                    { required: true, message: '请输入转入卡号', trigger: 'blur' },
                    { pattern: RegConfig.cardNo, message: '请输入13-21位的银行卡账号', trigger: 'blur' },
                ],
                OVERPAYAMT: [
                    { required: true, message: '请输入转出金额', trigger: 'blur' },
                    { pattern: RegConfig.amount, message: '请输入正确的金额', trigger: 'blur' },
                    { validator: validatorPass, trigger: 'blur' },
                ],
                // shiftIntoBankNo: [
                //     { required: true, message: '请输入申请转入的银行行号', trigger: 'blur' },
                // ],
                // shiftIntoBankName: [
                //     { required: true, message: '请选择申请转入的银行卡银行名称', trigger: 'blur' },
                // ],
            },
            OXFRAVALX: '0',
            cardList: [],
            outFlag: [],//跨行标志，0-不跨行，1-跨行
            ifCheckOut: false,//是否显示借记卡验证按钮
            ifPass: '0',//是否通过借记卡验证，0-未通过，1-通过
            checkflag: false,
            ifcheckacct: false,
            speechList: [],//话术列表
            selectedList: [],
            MenuId: '',
            outCard: '',
        };
    },

    created() { },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        AccountionTYPE_INFO: state => state.common.AccountionTYPE_INFO, //账户类别列表
        cardList_3601: state => state.common.cardList_3601, //卡列表
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
        businessMenu: state => state.menu.businessMenu,
    }),

    async mounted() {
        this.MenuId = this.$route.params.id || '';
        this.outFlag = await getDictSelectList('OUTFLAG', this);
        await this.init();
    },
    methods: {
        // 初始化方法
        async init() {
            // 获取银行下拉选择列表
            //this.getBankList();



            console.log("默认账户类别：" + this.cardInfo_3004.CATEGORY);
            console.log("默认账户：" + this.cardInfo_3004.CARDNO);
            this.searchForm.accountType = this.cardInfo_3004.CATEGORY + '';

            //this.searchForm.cardno = this.cardInfo_3004.CARDNO;
            this.changeCardList(this.searchForm.accountType);

            // 获取当前卡账户的信息 跑 3001 交易
            await this.getInitData();

            console.log(" this.searchForm.OXFRAVALX", this.searchForm.OXFRAVALX);
            await this.getspeechList();
        },
        changeCardList(val) {
            console.log("当前账户类型：" + val);
            this.cardList = [];
            this.cardList_3601.forEach((item) => {
                if (item.CATEGORY + '' === val) {
                    this.cardList.push(item);
                }
            });
            this.searchForm.cardno = this.cardList[0].CARDNBR;

            //切换账户，重新查询3001
            // 获取当前卡账户的信息 跑 3001 交易
            this.getInitData();
        },
        // 获取当前卡账户的信息 跑 3001 交易
        async getInitData() {
            // 设置请求参数 -- 3001 交易
            const appBody = {
                CARDNO: this.searchForm.cardno, // 卡号
                PINFLAG: '0', // 是否检查密码标志 0-不检查
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3001';
            params.body.appBody = appBody;

            // 跑 3001 交易
            await this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 3001');
                    if (result.sysHead.rspCd === '000000') {
                        this.searchForm.OXFRAVALX = result.body.appBody.BALNCEFLG === '+' ? result.body.appBody.BALNCE : result.body.appBody.BALNCEFLG + '' + result.body.appBody.BALNCE;
                        console.log(" this.searchForm.OXFRAVALX0", this.searchForm.OXFRAVALX);
                        this.OXFRAVALX = result.body.appBody.BALNCE;
                    } else {
                        // this.$message.error(result.sysHead.rspMsg)
                        this.$alert(result.sysHead.rspMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 获取银行下拉选择列表
        async getBankList() {
            this.bankList = await getDictSelectList('9919', this);
        },
        changeFlag(val) {
            console.log("val", val);
            if (val === '0') {
                this.ifCheckOut = false;
                this.outButtonFlag = true;
                this.ifcheckacct = false;
                this.checkflag = false;
                this.searchForm.shiftIntoBankNo = '6440';
                this.searchForm.shiftIntoBankName = '徽商银行';
            } else {
                this.ifCheckOut = true;
                this.outButtonFlag = false;
                this.ifcheckacct = true;
                this.checkflag = false;
                this.searchForm.shiftIntoBankNo = '';
                this.searchForm.shiftIntoBankName = '';

            }
        },

        // 切换申请转入的银行
        handLeChange(val) {
            if (val) {
                this.bankList.forEach((item) => {
                    if (item.label === val) {
                        this.searchForm.shiftIntoBankNo = item.code;
                        this.$refs.searchForm.validateField('shiftIntoBankNo');
                    }
                });
            }
        },

        // 输入银行号
        handleInput(val) {
            console.log(val, 'cal');
            if (val) {
                this.bankList.forEach((item) => {
                    if (item.code === val) {
                        this.searchForm.shiftIntoBankName = item.label;
                    } else {
                        this.searchForm.shiftIntoBankName = '';
                    }
                });
            } else {
                this.searchForm.shiftIntoBankName = '';
            }
        },
        /**
                 * 调核心接口1301查询储蓄卡账户信息
                 */
        checkAcct() {
            if (this.searchForm.shiftIntoCardNo.trim() === '') {
                this.$alert('请输入储蓄卡', '提示', {
                    customClass: 'warning', type: 'warning',

                });
                return;
            }
            const appBody = {
                CrdNo: this.searchForm.shiftIntoCardNo, // 储蓄卡号
                ActNo: '', // 账号
                VerfPwdFlg: '0', //是否校验密码
                Pin: '',//密码

            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '1301';
            params.body.appBody = appBody;

            // 跑 3072 交易
            this.$post.common.esbtran(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    this.ifcheckacct = true;//已做过借记卡校验
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 1301');
                    if (result.sysHead.rspCd === '000000') {
                        console.log("借记卡信息：", result.body.appBody);
                        console.log(result.body.appBody.IdentNo + "借记卡信息：" + this.cardInfo_3004.CUSTID);
                        //是否本人名下
                        if (result.body.appBody.IdentNo + '' != this.cardInfo_3004.CUSTID + '') {
                            this.$alert('储蓄卡非本人名下，不能办理此业务', '提示', {
                                customClass: 'error', type: 'error',

                            });
                            this.checkflag = true;
                            return;
                        }
                        //是否是一类户
                        if (result.body.appBody.ThrClCrdActFlg + '' === '3') {
                            this.$alert('储蓄卡为三类户，不能办理此业务', '提示', {
                                customClass: 'error', type: 'error',
                            });
                            this.checkflag = true;
                            return;
                        }

                        //状态是否正常
                        if ((result.body.appBody.AcctStsCd + '').indexOf('1') > 0) {
                            this.$alert('储蓄卡状态不正常，不能办理此业务', '提示', {
                                customClass: 'error', type: 'error',
                            });
                            this.checkflag = true;
                            // return;
                        }
                        if (result.body.appBody.ThrClCrdActFlg + '' === '2') {
                            console.log("二类户：", result.body.appBody.ThrClCrdActFlg);
                            this.$alert('储蓄卡为二类户，校验成功', '提示', {
                                customClass: 'success', type: 'success',
                            });
                        } else {
                            this.$alert('储蓄卡校验成功', '提示', {
                                customClass: 'success', type: 'success',
                            });
                        }
                        this.outCard = this.searchForm.shiftIntoCardNo.trim();
                        this.ifPass = '1';
                        this.checkflag = false;
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspDesc}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                        this.checkflag = true;
                    }
                } else {
                    this.$message.error('请求失败，验证失败');
                    this.checkflag = true;
                }
            });
        },
        //验证成功之后改变借记卡号，申请按钮不可用，需重新验证借记卡号
        checkagain() {
            if (this.outCard === '') {
                return;
            }

            if (this.outCard !== '' && this.outCard !== this.searchForm.shiftIntoCardNo.trim()) {
                this.checkflag = true;
            } else {
                this.checkflag = false;
            }
        },
        // 点击转出 跑 4132 交易
        handleRollOut() {
            if (this.searchForm.outFlag === '0') {
                if (this.ifPass === '0') {
                    this.$alert('借记卡号未通过验证，不能办理此业务', '提示', {
                        customClass: 'error', type: 'error',
                    });
                    return;
                }
            }

            console.log("this.selectedList.length", this.selectedList.length);
            if (this.selectedList.length != this.speechList.length) {
                this.$alert('话术尚未全部勾选！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            this.$refs.searchForm.validate((valid) => {
                if (valid) {
                    this.$confirm('您确认转出吗？', '温馨提示', { customClass: 'warning', type: 'warning' }).then(() => {
                        this.pageLoading = true;
                        // 设置请求参数 -- 4132 交易
                        const appBody = {
                            CARDNBR: this.searchForm.cardno, // 卡号
                            PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                            OPTION: 1, // 0：查询1：新增2：修改3：删除
                            DATE: 20261212, // 转出日期
                            // DATE: moment(new Date()).format('YYYYMMDD'), // 转出日期
                            AUTOFG: 1, // 自动处理 0:不自动处理 1:自动处理 默认为0
                            BANKACCT: this.searchForm.shiftIntoCardNo, // 转入卡卡号
                            ONUSFLAG: 0, // 转入卡本跨行标识 0-不区分 1-跨行，默认0
                            OVERPAYAMT: '0.0', // 溢缴款转出金额 默认为0
                            CURRNUM: '0', // 溢缴款转出币种
                        };
                        const params = JSON.parse(JSON.stringify(this.defaultParams));
                        // console.log(this.defaultParams, 'this.defaultParams')
                        params.body.appHead.tranCode = '4132';
                        params.body.appBody = appBody;

                        // 跑 4132 交易
                        this.$post.common.transPort(params).then((res) => {
                            this.pageLoading = false;
                            if (res.status === 200) {
                                const result = JSON.parse(res.data.jsonRes);
                                console.log(result, 'result -- 4132');
                                if (result.sysHead.rspCd === '000000') {
                                    this.rollOutData = result.body.appBody;
                                    // 打开展示转出对话框
                                    this.isShowDialog = true;
                                } else {
                                    const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                                    this.$alert(errorMsg, result.sysHead.rspDesc, {
                                        customClass: 'error', type: 'error',
                                    });
                                }
                            } else {
                                this.$message.error('请求失败');
                            }
                        });
                    }).catch(() => {

                    });
                } else {
                    this.pageLoading = false;
                }
            });
        },

        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForm.resetFields();
        },

        // 点击关闭对话空框
        handleCloseDialog() {
            this.isShowDialog = false;
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.getInitData();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(val);
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.overPayment {
    .searchForm {
        .el-form-item__content {
            text-align: left;
        }
    }
}
</style>
<style scoped lang="scss">
.overPayment {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .buttonBox {
        text-align: center;
        margin: 50px 0 0 0;
        padding-right: 30px;
    }
}

.messageDialog {
    .el-row {
        margin-bottom: 30px;

        .infoItem {
            .title {
                font-weight: 600;
                padding-right: 10px;
            }

            .info {
                color: #999;
            }
        }
    }
}
</style>
